<template>

  <div class="box">
    <el-header style="height: 110px;background-color: white">
      <div class="permission_text">商品基础设置</div>
      <div class="Breadcrumb"><span>首页</span><span>/</span><span>商品基础设置</span><span>/</span><span>人员管理</span></div>
    </el-header>
    <el-button type="primary">批量删除</el-button>
    <el-popover
      ref="popover1"
      placement="top-start"
      title=""
      width="200"
      trigger="hover"
      content="点击查看详情">
    </el-popover>
    <el-button v-popover:popover1>商品基础设置</el-button>

    <template>
      <el-select v-model="value" placeholder="请选择修改种类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    <!--<el-button @click="addLine">添加行数</el-button>-->

    <el-button type="text" @click="dialogFormVisible = true">新增一行</el-button>
<div class="form">
  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"  style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"  style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"  style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"  style="width: 200px"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</div>


    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="date"
          label="序号"
          width="100">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEgdit">{{scope.row.date}}</span>
            <el-input v-if="scope.row.isEgdit" v-model="scope.row.date"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="成色编码"
          width="180">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEgdit">{{scope.row.name}}</span>
            <el-input v-if="scope.row.isEgdit" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="成色名称">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEgdit">{{scope.row.address}}</span>
            <el-input v-if="scope.row.isEgdit" v-model="scope.row.address"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="重量单位">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEgdit">{{scope.row.address}}</span>
            <el-input v-if="scope.row.isEgdit" v-model="scope.row.address"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="成分比例">
        </el-table-column>
        <el-table-column
          prop="address"
          label="成色类别">
        </el-table-column>
        <el-table-column
          prop="address"
          label="千足料名称">
        </el-table-column>
        <el-table-column
          prop="operating"
        label="操作">
          <template slot-scope="scope">
            <el-button  v-if="!scope.row.isEgdit" type="primary"@click='edit(scope.$index,scope.row)' icon="el-icon-edit"></el-button>
            <el-button v-if="scope.row.isEgdit" type="success" size="small" @click='editSuccess(scope.$index,scope.row)' icon="el-icon-check" style="width: 58px;height: 40px;background-color: #66b1ff"></el-button>
            <el-button type="primary" @click="handleDelete(scope.$index,scope.row)" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--弹出删除框-->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow" >确 定</el-button>
            </span>
    </el-dialog>




  </div>
</template>

<script>
    export default {
        name: "product_basics",
      data() {
        return {
          tableData: [{
            date: '1',
            name: 'k1',
            address: '18k金'
          }, {
            date: '1',
            name: 'k1',
            address: '18k金'
          }, {
            date: '1',
            name: 'k1',
            address: '18k金'
          }, {
            date: '1',
            name: 'k1',
            address: '18k金'
          }],
          packData:[],
          delVisible:false,//删除提示弹框的状态
          msg:"",//记录每一条的信息，便于取id
          delarr:[],//存放删除的数据
          multipleSelection:[],//多选的数据

          input: '',
          options: [{
              value: '选项1',
              label: '颜色'
            }, {
              value: '选项2',
              label: '净度'
            }, {
              value: '选项3',
              label: '切工'
            }, {
              value: '选项4',
              label: '火彩'
            }, {
              value: '选项5',
              label: '形状'
            }],
            value: '',
          dialogTableVisible: false,
          dialogFormVisible: false,
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          formLabelWidth: '90px',
          }
        },

      methods:{
        // 获取数据,这里只简单展示数据，最好可以把当前页面，每页显示数据，搜索等参数传值到后台，因为删除会影响分页和数据
        getPackData() {
          this.$axios.post('/api/selectPackPageMade.do').then((res) => {
            this.packData = res.data;
          }).catch(function(error){
            console.log(error);
          })
        }, //单行删除
        handleDelete(index, row) {
          this.idx = index;
          this.msg=row;//每一条数据的记录
          this.delarr.push(this.msg.PackingId);//把单行删除的每条数据的id添加进放删除数据的数组
          this.delVisible = true;
        },
        //批量删除
        delAll() {
          this.delVisible = true;//显示删除弹框
          const length = this.multipleSelection.length;
          for (let i = 0; i < length; i++) {
            this.delarr.push(this.multipleSelection[i].PackingId)
          }
        },
        //编辑
        edit(index, row) {
          this.$set(row, 'isEgdit', true)
        },
        //编辑成功
        editSuccess(index, row) {
          this.$set(row, 'isEgdit', false)
        },
        //操作多选
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 确定删除
        deleteRow() {
          this.$axios.get("/api/delPackTotalMade.do", {
            params: {
              delarr: this.delarr
            }
          }).then(res => {
            if (res.data == "包装删除成功") {
              this.getPackData();
              this.$message.success('删除成功')
            }
          }).catch(error => {
            console.log(error);
            this.$message.error('包装删除失败')
          })
          this.delVisible = false;//关闭删除提示模态框
        }
      }
    }
</script>

<style scoped>

  .form{
    width: 50%;
    height: 30%;
  }
.box {
  background-color: #f6f6f6;
  width: 85%;
  min-height: 600px;
}

.table_pad {
  margin-left: 35px;
  margin-top: 40px;
}

.permission_text {
  font-size: 30px;
  padding-top: 20px;
  padding-left: 15px;
}

.subhead {
  font-size: 24px;
}

.line {
  margin-top: 10px;
  margin-bottom: 30px;
  border-top: 1px solid #DADADA;
}

.Breadcrumb {
  font-size: 12px;
  margin-top: 10px;
  margin-left: 10px;
  color: #999999;
}

.Breadcrumb span {
  margin-left: 10px;
}

.Breadcrumb span:nth-of-type(1), .Breadcrumb span:nth-of-type(3) {
  color: #3380FF;
}

table.gridtable {
  font-family: verdana, arial, sans-serif;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  text-align: center;
}

table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #ECEEF5;
  width: 300px;
  background-color: #F2F2F2;
}

table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #ECEEF5;
  font-size: 11px;
}
</style>
